<style lang="scss">
.vue-code-mirror__tool {
  display: none;
}

</style>

<template>
  <div>
    开发
    <z-space vertical>
      <RemoteFileViewer file="example/views/chart/transform.js"></RemoteFileViewer>

      <p>第一排为x轴 cateory</p>
      <p>下面两个图表公用一个数据</p>


      <zw-tabs class="z-tabs" selected="1" >
        <z-tab-pane index="1">
          <template #label="scope">风格1</template>
          <div>
            <z-chart :style="getStyle()"  :option="chart1Data.widgetConfig.option"></z-chart>
          </div>
        </z-tab-pane>
        <z-tab-pane index="2">
          <template #label="scope">风格2</template>
          <div>
            <z-chart :style="getStyle()"  :option="chart2Data.widgetConfig.option"></z-chart>
          </div>
        </z-tab-pane>
      </zw-tabs>

      <div>
        <p>数据可以给表格使用</p>
        <z-table :columns="table1Data.columns" height="auto" :selectable="false"
                 :sequence="false"
                 :data="table1Data.data" :pagination="false" ></z-table>
      </div>

      <div>
        <h3>饼图</h3>
        <p>饼图是一列数据的各自百分比</p>
        <RemoteFileViewer file="example/views/chart/pieData.js"></RemoteFileViewer>

        <z-chart     :style="getStyle()"  :option="pieData.widgetConfig.option"></z-chart>


        <p>多个饼图</p>
        <z-chart  :style="getStyle(800)"  :option="multiPieChartOption"></z-chart>
      </div>
    </z-space>
  </div>
</template>

<script>
import RemoteFileViewer from "@example/plugins/example/components/RemoteFileViewer";
import datas from '@example/views/drag/data'
import {INIT_HEIGHT, INIT_WIDTH} from "@example/views/drag/const";
import {responseData, pieOption} from "./transform";
import {genTableOption} from "@example/views/chart/utils";
import {multiPieChartOption} from "@example/views/chart/multiPie";

export default {
  components: {RemoteFileViewer},
  data() {
    let pieData = datas[2].children[0].data()
    let serie = pieData.widgetConfig.option.series[0]
    console.log('pieData', pieOption, serie)
    serie.data = pieOption.data
    return {
      datas,
      multiPieChartOption,
      chart1Data: datas[0].children[1].data(),
      chart2Data: datas[1].children[0].data(),
      table1Data: genTableOption(responseData.records, responseData.columns),
      pieData: pieData
    }
  },
  methods: {
    getStyle(w) {
      let width = w ?? INIT_WIDTH
      let height =  INIT_HEIGHT
      return {
        width: width + 'px',
        height: height + 'px'
      }
    },
  }
}
</script>
